<template>
	<view class="main">
	
		<view style="height:50rpx;"></view>
		<view v-if="showvote==false">
			<view style="padding:20rpx 0;">
				<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230113/4794b83ccc19b4ef8bdb144eceb4dbd5.png"></image>
				
			</view>
			<view style="padding:0 20rpx 20rpx;padding-bottom:100rpx;position: relative;top:-150rpx;">
				<view style="background-color: #fff;border-radius: 15rpx;padding-bottom:20rpx;">
					<view class="vote_head">
						<view class="vote_title">
							<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230114/09fb41f840c87ce52c62dffaf7b94769.png"></image>
						</view>
						
						<view>
							<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
							</u-empty>
							<view v-for="(item,index) in list" :key="index">
								<view class="title_decri" style="margin-top: 30rpx;">{{item[0].vote_name}}结果</view>
								<u-grid :border="false" col="3">
									<u-grid-item v-for="(ite,inde) in item" :key="inde">
										<view class="vote_con u-rela">
											<image class="vote_img" style="border-color: #ffd434;" mode="aspectFill" :src="ite.avatar"></image>
											<text class="num_vote">{{inde+1}}</text>
											<image class="img_vote" mode="widthFix" style="width:80rpx" src="https://resourse.cnlhjt.com/upload/20230114/4d1603b488fbc8df7b65a8b1c62f69d2.png"></image>
											<view style="font-weight: bold;">{{ite.name}}</view>
											<view class="dp overflow" style="color:#333;">
												<text>{{ite.span}}</text>
											</view>
											
											<view class="vote_btn">
												票数：{{ite.num}}
											</view>
											
											
										</view>
									</u-grid-item>
								</u-grid>
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
			
		</view>
		<u-popup :show="showvote" mode="center" round="15"  :maskCustomStyle="{background: 'rgba(0, 0, 0, 1)'}" bgColor="transparent">
			
				<view class="vote_tan">
					<view class="title">请输入查看验证码</view>
					<view class="tan_input">
						<text>验证码：</text>
						<input style="width:75%;" type="text" v-model="code">
						<view v-if="issure" style="font-size: 24rpx;color:red;">验证码不正确</view>
					</view>
					<view class="sure_btn" @click="sure">确认</view>
				</view>
			
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		rank
	} from "@/service/questionService.js";
	export default {
		data () {
			return {
				showvote:true,
				list:[],
				showEmpty:false,
				code:'',
				issure:false
			}
		},
		
		mounted() {
			rank().then(this.rank);
		},
		methods:{
			
			rank(e){
				if(e.code==200){
					this.list=e.result;
					this.showEmpty=false
				}else{
					this.list=[];
					this.showEmpty=true
				}
			},
			sure(){
				if(this.code=='123123'){
					
					this.issure=false;
					this.showvote=false;
					
				}else{
					this.showvote=true;
					this.issure=true;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: darkred;
		background-image: url('https://resourse.cnlhjt.com/upload/20230110/5cfa2eb011353ecc79cc0f8597492065.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.vote_head{
		text-align: center;
		padding:30rpx 0 20rpx;
		.vote_title{
			width:65%;
			height:80rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			margin:0 auto;
		}
		.fu_title{
			margin:40rpx 0;
			font-size: 28rpx;
			color:#333;
		}
		.title_decri{
			width:85%;
			padding:20rpx;
			margin:0 auto;
			color:#fff;
			text-align: center;
			font-size: 28rpx;
			background-image: url('https://resourse.cnlhjt.com/upload/20230114/5c0e1f3f8bbfb6145b6e1dae3bef89cf.png');
			background-size: 100% 100%;
			background-position: center center;
		}
	}
	.vote_con{
		width:90%;
		text-align: center;
		margin-top: 20rpx;
		padding:30rpx 0 20rpx;
		// box-shadow: 0 0 10rpx #ddd;
		// border-radius: 10rpx;
		.vote_img{
			width:160rpx;
			height:160rpx;
			border:5rpx solid #ffd434;
			border-radius: 50%;
		}
		.num_vote{
			position: absolute;
			top:140rpx;
			left:25rpx;
			width:35rpx;
			height:35rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 35rpx;
			color:#c82900;
			font-size: 23rpx;
			background-color: #ffd434;
		}
		.img_vote{
			position: absolute;
			right:27rpx;
			top:-13rpx;
		}
		.dp{
			font-size: 26rpx;
			color:#666;
			margin:12rpx 0 5rpx;
		}
		.vote_btn{
			display: inline-block;
			padding:8rpx 8rpx;
			width:120rpx;
			font-size: 26rpx;
			color:#fff;
			margin-top:15rpx;
			background-image: url('https://resourse.cnlhjt.com/upload/20230114/1133efe2c62e40cf4e01f4bd048207e6.png');
			background-size: 100% 100%;
			background-position: center center;
		}
	}
	.com{
		width:60%;
		font-size: 24rpx;
		font-family: 'Times New Roman', Times, serif;
		line-height: 35rpx;
		// font-family:"隶书";
		left:120rpx;
		top:250rpx;
	}
	.lastpage{
		width:100%;
		bottom:280rpx;
		color:#ffb07d;
		font-weight: bold;
		text-align: center;
	}
	.ticket_btn{
		bottom:200rpx;
		left:20%;
		width:62%;
		height:70rpx;
		color:#62270b;
		font-weight: bold;
		text-align: center;
		line-height: 68rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20230110/bc90c526119ff01355d413c550721bfd.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.vote_tan{
		padding:20rpx 40rpx 40rpx;
		width:550rpx;
		background-color: #fff;
		border-radius: 15rpx;
		.title{
			text-align: center;
			padding:20rpx 0 50rpx;
			font-size: 35rpx;
			color:#333;
			font-weight: bold;
		}
		.tan_input{
			margin-bottom:50rpx;
			input{
				display: inline-block;
				width:45%;
				border-bottom: 1rpx solid #ddd;
				vertical-align: middle;
			}
			text{
				vertical-align: middle;
			}
			.btn_code{
				font-size: 25rpx;
				color:#fff;
				margin-left:15rpx;
				padding:5rpx 20rpx;
				background-color: #d0000c;
				border-radius: 10rpx;
			}
		}
		.sure_btn{
			width:100%;
			height:70rpx;
			line-height: 70rpx;
			color:#fff;
			text-align: center;
			border-radius: 35rpx;
			background-image: linear-gradient(to right,#f64337,#d0000c);
		}
	}
</style>